<template>
  <el-main class="content">
    <h2>{{ title }}</h2>
    <div v-if="contentComponent">
      <component :is="contentComponent"></component>
    </div>
    <p v-else>这里是内容区域，根据菜单选择显示不同的内容。</p>
  </el-main>
</template>

<script>
import HomeContent from "../components/HomeContent.vue";
import UserHaveTask from "../components/UserHaveTask.vue";
import UserAcceptTask from "../components/UserAcceptTask.vue";
import UserHaveNewTask from "@/components/UserHaveNewTask.vue";
import UserInformation from "../components/UserInformation.vue";
import LoginContent from "../components/Login.vue";
import RegisterContent from "@/components/Register.vue";

export default {
  name: "ContentPanel",
  data() {
    return {
      contentComponents: {
        Home: HomeContent,
        Task: UserHaveTask,
        Accept: UserAcceptTask,
        Login: LoginContent,
        Register: RegisterContent,
        NewTask: UserHaveNewTask,
        Information: UserInformation,
      },
    };
  },
  computed: {
    title() {
      return this.$route.meta.title || "未知";
    },
    contentComponent() {
      return this.contentComponents[this.$route.name];
    },
  },
};
</script>

<style scoped>
.content {
  background-color: #545c64;
  padding: 20px;
}
</style>